<template>
	<view class="list">
		<!-- 毛玻璃背景 -->
		<view class="fixbg" :style="{ 'background-image': 'url(' + playList.coverImgUrl+ ')'}"></view>
		<!-- 头部 -->
		<musicHead title="歌单" :icon="true" color="white"></musicHead>
		<!-- 内容 -->
		<view class="container" v-show="!isLoading">
			<scroll-view scroll-y="true">
				<!-- 头部布局 -->
				<view class="list_head">
					<view class="list_head_img">
						<image :src="playList.coverImgUrl" mode=""></image>
						<view class="list_head_img_logo">
							<text class="iconfont icon-yousanjiao"></text>
							<text>{{ playList.playCount | formatCount }}</text>
						</view>
					</view>
				
					<view class="list_head_text">
						<view>{{ playList.name}}</view>
						<view >
							<image :src="playList.creator.avatarUrl" mode=""></image>
							<text>{{ playList.creator.nickname }}</text>
						</view>
						<view>{{ playList.description }}</view>
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<button open-type="share" class="list_share">
					<text class="iconfont icon-fenxiang"></text>
					分享给微信好友
				</button>
				<!-- #endif -->
				<view class="list_music">
					<view class="list_music_head">
						<text class="iconfont icon-bofang"></text>
						<text>播放全部</text>
						<text>(共{{ playList.trackCount }}首)</text>
					</view>
					<view class="list_music_item" v-for="(item, index) in playList.tracks" :key="index" @tap="handleToDetail(item.id)">
						<view class="list_music_top">{{ index + 1}}</view>
						<view class="list_music_song">
							<view>{{ item.name }}</view>
							<view>
								<image v-if="privilEges[index].flag >= 60 && privilEges[index].flag <= 70" src="../../static/dujia.png" mode=""></image>
								<image v-if="privilEges[index].maxbr == 999000" src="../../static/sq.png" mode=""></image>
								{{ item.ar[0].name }}-{{ item.name }}
							</view>
						</view>
						<text class="iconfont icon-24gl-playCircle list_music_bo"></text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { list } from "../../common/api.js"
	import musicHead from "../../components/musicHead/musichead.vue"
	import formatCount from "../../main.js"
	export default {
		data() {
			return {
				//列表页具体信息，防止undefined
				playList: {
					creator:{
						avatarUrl:''
					},
					coverImgUrl: '',
					description:'',
					trackCount:'',
					tracks: {
						
					},
				},
				privilEges: [],
				isLoading: true, //进入页面加载
			}
		},
		components:{
			musicHead
		},
		onLoad(options) {
			//加载
			uni.showLoading({
				title:"内容加载中..."
			})
			//列表数据请求
			list(options.id).then(res => {
				if(res[1].data.code == 200) {
					this.playList = res[1].data.playlist;
					this.privilEges = res[1].data.privileges;// 判断无损和独家
					this.$store.commit('INIT_TOPLISTIDSinit_topList', res[1].data.playlist.trackIds)
					this.isLoading = false;// 加载关闭
					uni.hideLoading(); // 提示关闭
				} else {
					uni.showToast({
						title: '数据加载失败!',
						icon: "error",
						duration: 1000
					});
				}
				
			})
		},
		methods: {
			//跳转歌曲详情页
			handleToDetail(songId) {
				uni.navigateTo({
					url:"/pages/detail/detail?songId=" + songId
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list_head {
		display: flex;
		margin: 30rpx;
		.list_head_img{
			width: 264rpx;
			height: 254rpx;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.list_head_img_logo{
				position: absolute;
				top: 8rpx;
				right: 8rpx;
				color: white;
				font-size: 24rpx;
				display: flex;
				align-items: center;
			}
		}
		.list_head_text{
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			view:nth-child(1){
				color: white;
				font-size: 32rpx;
				font-weight: 600;
			}
			view:nth-child(2){
				display: flex;
				align-items: center;
				margin: 20rpx 0;
				font-size: 24rpx;
				image {
					width: 54rpx;
					height: 54rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				text {
					color: white;
					font-size: 26rpx;
				}
			}
			view:nth-child(3){
				width: 90%;
				line-height: 32rpx;
				font-size: 22rpx;
				color: white;
				text-overflow: ellipsis;
				overflow: hidden;
				display:-webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:3; 
			}
		}
	}
	// 分享
	.list_share {
		width: 330rpx;
		height: 74rpx;
		background: rgba(0, 0, 0, .3);
		color: white;
		border-radius: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		text {
			margin-right: 14rpx;
			font-weight: 600;
		}
	}
	// 歌单列表
	.list_music {
		background: white;
		margin-top: 40rpx;
		padding: 30rpx;
		border-top-right-radius: 60rpx;
		border-top-left-radius: 60rpx;
		.list_music_head {
			display: flex;
			align-items: flex-end;
			text:nth-child(1){
				font-size: 50rpx;
				margin-right: 20rpx;
			}
			text:nth-child(2){
				margin-right: 5rpx;
			}
			text:nth-child(3){
				color: #b2b2b2;
				font-size: 26rpx;
			}
		}
		.list_music_item {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			.list_music_top {
				width: 50rpx;
				text-align: center;
				font-size: 36rpx;
				color: #909090;
				margin-right: 20rpx;
			}
			.list_music_song {
				flex: 1;
				view:nth-child(1) {
					font-size: 28rpx;
					width: 70vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				view:nth-child(2) {
					color: #909090;
					font-size: 26rpx;
					width: 70vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					image {
						margin-right: 7rpx;
						width: 30rpx;
						height: 20rpx;
					}
				}
			}
			.list_music_bo {
				font-size: 50rpx;
				color: #c7c7c7;
			}
		}
	}
</style>
